Webframeworkk/ASP.NET Core/Razor Views

Basierend auf der Analyse von start.txt enthält dieses Dokument Tutorials und Erklärungen zu den Kernkonzepten von ASP.NET Core MVC, einschließlich Architektur, Views, Razor-Syntax, Datenübergabe und der Erstellung wiederverwendbarer Komponenten.

MVC Architektur

Model-View-Controller (MVC) ist ein Entwurfsmuster, das eine Anwendung in drei logische Hauptkomponenten unterteilt:

1. Model (Modell)

Repräsentiert die Daten und die Geschäftslogik der Anwendung.

  • Business Model (Domänenmodell): Repräsentiert reale Entitäten (z. B. Produkt, Kunde) und die Kerngeschäftslogik/-validierung.
  • View Model: Ein maßgeschneidertes Modell, das speziell für eine View entworfen wurde. Es kann Daten aus mehreren Geschäftsmodellen aggregieren oder UI-spezifische Eigenschaften enthalten.

2. View (Ansicht)

Verantwortlich für das Rendern der Benutzeroberfläche (UI).

  • Typischerweise definiert in .cshtml-Dateien unter Verwendung der Razor-Syntax.
  • Generiert dynamisch HTML basierend auf den vom Controller bereitgestellten Daten.

3. Controller (Steuerung)

Arbeitet als Vermittler zwischen dem Model und der View.

  • Empfängt Benutzereingaben (HTTP-Anfragen).
  • Interagiert mit dem Model, um Operationen durchzuführen oder Daten abzurufen.
  • Wählt die geeignete View aus, um die Antwort zu rendern.

Ablauf der Ausführung

  1. Routing: Die Anfrage wird an einen bestimmten Controller und eine Action-Methode weitergeleitet.
  2. Model Binding: Daten aus der Anfrage werden extrahiert und in Parameter umgewandelt.
  3. Model Validation: Daten werden gegen im Model definierte Regeln validiert.
  4. Controller Action: Logik wird ausgeführt (z. B. Datenbankaufrufe).
  5. View Selection: Der Controller wählt eine View aus und übergibt ihr Daten (oft ein Model oder ViewModel).
  6. Rendering: Die View verarbeitet die Daten und generiert HTML.
  7. Response: Valides HTML wird an den Client zurückgesendet.

MVC aktivieren

In Program.cs wird der MVC-Service registriert:

builder.Services.AddControllersWithViews();

Dies aktiviert die Controller-Erkennung, die Razor View Engine, Model Binding und Validierung.

Views in ASP.NET Core

Views sind die Präsentationskomponente der MVC-Anwendung.

  • Ort: Konventionsgemäß befinden sich Views in Views/[ControllerName]/[ActionName].cshtml.
  • Funktion: Sie führen Daten (vom Model/ViewData) mit HTML-Vorlagen zusammen.
  • ViewResult: Eine Controller-Action gibt typischerweise ein ViewResult unter Verwendung der View()-Hilfsmethode zurück.
public IActionResult Index()
{
    // Sucht standardmäßig nach Views/Home/Index.cshtml
    return View(); 
}

Razor View Engine

Razor ist die Markup-Syntax, die in ASP.NET Core Views verwendet wird, um C#-Code in HTML einzubetten.

Wichtige Syntax-Elemente

  • Code-Blöcke: @{ ... } für mehrzeilige C#-Ausführung.
  • Ausdrücke: @variable oder @(ausdruck), um Werte auszugeben.
  • Literale: @: oder <text>...</text>, um rohen Text innerhalb von Code-Blöcken auszugeben.

Kontrollfluss

Razor unterstützt Standard-C#-Kontrollflussstrukturen:

If/Else:

@if (Model.IsActive)
{
    <p>Aktiv</p>
}
else
{
    <p>Inaktiv</p>
}

Schleifen (Loops):

@foreach (var item in Model.Items)
{
    <li>@item.Name</li>
}

Switch:

@switch (Model.Status)
{
    case Status.Pending:
        <span>Ausstehend...</span>
        break;
    case Status.Complete:
        <span>Erledigt!</span>
        break;
}

Lokale Funktionen in Razor

Sie können wiederverwendbare C#-Funktionen direkt innerhalb einer Razor-View unter Verwendung des @functions-Blocks definieren. Dies kapselt Logik, die spezifisch für diese View ist.

Syntax:

@functions {
    public string FormatDate(DateTime date)
    {
        return date.ToString("yyyy-MM-dd");
    }
}

Verwendung:

<p>Datum: @FormatDate(DateTime.Now)</p>

Vorteile:

  • Hält view-spezifische Logik zusammen.
  • Reduziert Code-Duplizierung innerhalb einer einzelnen View.
  • Kann auf andere Mitglieder zugreifen, die im @functions-Block definiert sind.

Html.Raw()

Standardmäßig kodiert Razor alle String-Ausgaben, um XSS (Cross-Site Scripting)-Angriffe zu verhindern. Html.Raw() wird verwendet, um einen String ohne Kodierung zu rendern.

Verwendung:

@{
    string htmlContent = "<strong>Fetter Text</strong>";
}
@Html.Raw(htmlContent)

Warnung:

  • Sicherheitsrisiko: Verwenden Sie dies nur mit vertrauenswürdigen Daten. Verwenden Sie Html.Raw() niemals mit Benutzereingaben, es sei denn, diese wurden streng bereinigt (sanitized), da dies die Anwendung für XSS-Angriffe öffnet.

ViewData und ViewBag

Mechanismen, um kleine Datenmengen vom Controller an die View zu übergeben.

ViewData

  • Typ: ViewDataDictionary (Schlüssel-Wert-Dictionary).
  • Erfordert Typumwandlung (Casting) für komplexe Typen.
  • Verwendung:
// Controller
ViewData["Title"] = "Startseite";

// View
<h1>@ViewData["Title"]</h1>

ViewBag

  • Typ: dynamic.
  • Ein Wrapper um ViewData.
  • Keine Typumwandlung erforderlich (wird zur Laufzeit geprüft).
  • Verwendung:
// Controller
ViewBag.Title = "Startseite";

// View
<h1>@ViewBag.Title</h1>

Best Practice: Verwenden Sie Streng typisierte Views (ViewModels) für Hauptdaten. Verwenden Sie ViewData/ViewBag nur für kleine, nebensächliche Daten (wie Seitentitel).

Streng typisierte Views

Binden Sie eine View direkt an eine spezifische Model-Klasse. Dies bietet IntelliSense, Typsicherheit und Überprüfung zur Kompilierzeit.

Syntax:

  1. Definieren Sie den Modelltyp oben in der View:
@model MyProject.Models.Person
  1. Greifen Sie über die Model-Eigenschaft auf Daten zu:
<p>Name: @Model.Name</p>

Controller:

public IActionResult Details()
{
    var person = new Person { Name = "John" };
    return View(person);
}

View Models: Es ist üblich, spezifische Klassen (View Models) zu erstellen, die Daten aus mehreren Entitäten aggregieren oder Daten speziell für die View formatieren.

public class PersonProductViewModel
{
    public Person Person { get; set; }
    public Product Product { get; set; }
}

ViewImports.cshtml

Eine spezielle Datei, die im Views-Ordner platziert wird, um gemeinsame Direktiven für alle Views in diesem Ordner (und Unterordnern) zu behandeln.

Häufige Verwendungen:

  • Namespaces: @using MyProject.Models (damit Sie es nicht zu jeder View hinzufügen müssen).
  • Tag Helpers: @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers.
  • Layouts: Definieren eines Standard-Layouts.

Beispielinhalt:

@using MyProject
@using MyProject.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Es beachtet die Hierarchie: Eine _ViewImports.cshtml in einem Unterordner (Views/Home/_ViewImports.cshtml) überschreibt oder ergänzt die Einstellungen der Root-Views/_ViewImports.cshtml.

Geteilte Views (Shared Views)

Views, die über mehrere Controller hinweg wiederverwendbar sind.

  • Ort: Views/Shared/

Häufige Typen:

  1. Layouts (_Layout.cshtml): Definiert die gemeinsame Struktur (Header, Footer, Referenzen) für die App.
  2. Partial Views (_PartialName.cshtml): Wiederverwendbare UI-Komponenten (z. B. eine Login-Box, ein Navigationsmenü).

Erkennung: Wenn ein Controller View("MyView") zurückgibt, sucht ASP.NET Core in:

  1. Views/[Controller]/MyView.cshtml
  2. Views/Shared/MyView.cshtml

Dieser Fallback-Mechanismus ermöglicht es Ihnen, globale Views im Shared-Ordner zu definieren.

Kategorien: Keine
Zuletzt aktualisiert am 17.02.2026 22:43